<template>
  <div class="bg-light store-pictures">
    <div class="container-title">照片</div>
    <div class="picList ml">
      <div>
        <div class="imgwrap">
          <div>
            <h3>门头照</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="mtz"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'headImageUrl')"
            />
            <div v-else>
              <imgLink :imgurl='imgs.headImageUrl' />
            </div>
          </div>
          <div class="orgPic ml" v-if="imgs.headImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.headImageUrlOrg' />
          </div>
        </div>
        
      </div>
     <div>
       <div class="imgwrap">
          <div>
            <h3>货架照</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="hjz"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'shelfImageUrl')"
            />
            <div v-else class="mt">
              <imgLink :imgurl='imgs.shelfImageUrl' />
            </div>
          </div>
          <div class="orgPic ml" v-if="imgs.shelfImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.shelfImageUrlOrg' />
          </div>
        </div>
     </div>
      <div>
        <div class="imgwrap">
          <div>
            <h3>吊架照</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="djz"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'hangerImageUrl')"
            />
            <div v-else class="mt">
              <imgLink :imgurl='imgs.hangerImageUrl' />
            </div>
          </div>
          <div class="orgPic ml" v-if="imgs.hangerImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.hangerImageUrlOrg' />
          </div>
        </div>
      </div>
      <div>
        <div class="imgwrap">
          <div>
            <h3>工位照</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="gwz"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'stationImageUrl')"
            />
            <div v-else class="mt">
              <imgLink :imgurl='imgs.stationImageUrl' />
            </div>
          </div>
          <div class="orgPic ml" v-if="imgs.stationImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.stationImageUrlOrg' />
          </div>
        </div>
      </div>
      <div>
        <div class="imgwrap">
          <div>
            <h3>海报照</h3>
            <PictureEditItem
              v-if="isEdit"
              :uploadList="hbz"
              :maxlength="1"
              :large="true"
              @uploadPic="uploadPic($event, 'posterImageUrl')"
            />
            <div v-else class="mt">
              <imgLink :imgurl='imgs.posterImageUrl' />
            </div>
          </div>
          <div class="orgPic ml" v-if="imgs.posterImageUrlOrg">
            <h3>更改前</h3>
            <imgLink :imgurl='imgs.posterImageUrlOrg' />
          </div>
        </div>
      </div>
    </div>
    <FooterBtns />
  </div>
</template>
<script>
  import FooterBtns from './FooterBtns';
  import PictureEditItem from '@/components/PictureEditItem'
  import { preFixPath } from '@/util'
  import imgLink from "./imgLink";

  export default {
    props: {
      form: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    components: {
      FooterBtns,
      PictureEditItem,
      imgLink
    },
    computed: {
      imgs() {
        return this.form.storeContractDTO.storeContractExtDTO || {}
      },
      mtz() {
        let url = this.imgs.headImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      hjz() {
        let url = this.imgs.shelfImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      djz() {
        let url = this.imgs.hangerImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      gwz() {
        let url = this.imgs.stationImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      },
      hbz() {
        let url = this.imgs.posterImageUrl
        return url ? [{ status: 'finished', imgUrl: url }] : []
      }
    },
    mounted () {
    },

    data() {
      return {
      }
    },
    methods: {
      uploadPic(v, type) {
        this.form.storeContractDTO.storeContractExtDTO[type] = v[0] ? v[0].imgUrl : ''
      }
    },
  }
</script>
